<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{persons.name}}</h2>
  <h2>年龄：{{persons.age}}</h2>
  <h2>职位：{{persons.job.type}}</h2>
  <h2>月薪：{{persons.job.salary}}</h2>
  <h2>爱好：{{hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // let name = ref('张三')
    // let age = ref(18)
    // let job = ref({
    //   type:'中级前端工程师',
    //   salary:'30k'
    // })
    let persons = reactive({
      name:'张三',
      age:'20',
      job:{
        type:'中级前端工程师',
        salary:'30k'
      },
      hobby:['抽烟','喝酒','烫头']
    })
    let hobby  = reactive(['抽烟','喝酒','烫头'])
    function changeInfo(){
      persons.name='李四'
      persons.age=30
      persons.job.type='UI设计师'
      persons.job.salary='40k'
      hobby[0]='打麻将'
      console.log(persons,hobby)
    }
    return{
      persons, hobby, changeInfo
    }
    //返回一个渲染函数（标签名，标签体信息）
    //return ()=> h('h1',"尚硅谷")
  }
}
</script>

<style>

</style>
